<script setup lang="ts">
import { ref }from'vue';
import { onShow }from'@dcloudio/uni-app';
import { useSearchHistory } from'@/stores';

const { safeAreaInsets } = uni.getSystemInfoSync()

const searchHistory = useSearchHistory()
const condition = ref<string>('')
const search = async() =>{
  if(condition.value === null || condition.value === '' || condition.value === undefined){
    return;
  }else{
    searchHistory.setSearchHistory(condition.value)
    uni.navigateTo({ url: `/pagesSearch/searchGoods/searchGoods?condition=${condition.value}`})
  }
}

const handleback = () => {
  uni.navigateBack({
	  delta: 1
  });
}

const showClearIcon = ref<Boolean>(false)

const clearInput = (event:any) => {
  condition.value = event.detail.value
  if (event.detail.value.length > 0) {
      showClearIcon.value = true
  } else {
    showClearIcon.value = false
  }
}

const clearIcon = () => {
  condition.value = '';
  showClearIcon.value = false;
}

// 删除历史搜索
const deleteSearch = () => {
  // 弹窗二次确认
  uni.showModal({
    content: '确定要清空历史记录吗',
    confirmColor: '#f14e4e',
    success: async (res) => {
      if (res.confirm) {
        searchHistory.cleanSearchHistory()
      }
    },
  })
}

// 点击历史搜索的内容
const handleHistoryGo = (el: string) => {
  uni.navigateTo({ url: `/pagesSearch/searchGoods/searchGoods?condition=${el}`})
}

const inpuRef = ref<UniHelper.Input>()
onShow(() => {
  inpuRef.value?.focus()
})

</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top! + 'px' }">
    <view class="search-css" @tap="handleback">
      <text class="icon-zuojiantou1" style="font-size: 50rpx;"></text>
    </view>
    <view class="search">
      <text class="icon-sousuo icon-search"></text>
      <input focus placeholder="点击搜索商品" @confirm="search" v-model="condition" @input="clearInput"/>
      <text class="icon-shanchu icon-delete" v-if="showClearIcon" @tap="clearIcon"></text>
    </view>
  </view>

  <view>
    <view class="title-icon">
      <view class="title">历史搜索</view>
      <text class="icon-shanchu1 icon" @tap="deleteSearch"></text>
    </view>
    <view class="history-content">
      <text v-for="item in searchHistory.historyData" :key="item" class="item-content" @tap="handleHistoryGo(item)">
        {{ item }}
      </text>
    </view>
  </view>
</template>

<style lang="scss">
.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgb(242, 241, 239);
  padding-right: 110px;

  .search-css{
    width: 40rpx;
    margin-left: 10rpx;
    height: 64rpx;
    line-height: 64rpx;
    margin: 5px 0 10px 8px;
  }

  .search {
    position: relative;
    width: 100%;
    margin: 5px 0 10px 11px;

    .icon-search{
      position: absolute;
      top: 18rpx;
      left: 20rpx;
      font-size: 28rpx;
      z-index: 95;
      
    }

    .icon-delete{
      position: absolute;
      top: 0;
      text-align: center;
      height: 64rpx;
      width: 60rpx;
      line-height: 64rpx;
      right: 0;
      font-size: 32rpx;
      color: rgba(191, 191, 191, 0.885);
      z-index: 99;
    }

    input{
      background-color: white;
      height: 64rpx;
      padding-left: 56rpx;
      border-radius: 32rpx;
      font-size: 25rpx;
    }
  }
}

.title-icon{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title{
    padding-left: 20rpx;
    padding-top: 20rpx;
  }

  .icon{
    padding-right: 20rpx;
    padding-top: 20rpx;
    color: rgba(210, 210, 210, 0.93);
  }
}

.history-content{
  margin-top: 20rpx;
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;

  .item-content{
    height: 40rpx;
    overflow:hidden; 
    line-height: 40rpx;
    padding: 8rpx 25rpx;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width: 98%;
    background-color: rgba(224, 222, 222, 0.951);
    margin: 10rpx;
    font-size: 26rpx;
    border-radius: 30rpx;
  }
}

</style>